<template>
  <div class="login">
    <h1>登录</h1>
    <input v-model="username" placeholder="用户名" />
    <input v-model="password" placeholder="密码" type="password" />
    <p v-if="errorMessage" class="error-message">{{ errorMessage }}</p>
    <button @click="login">登录</button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useUserStore } from '../stores/user';
import { useRouter } from 'vue-router';

const username = ref('123@e.com');
const password = ref('123456');
const userStore = useUserStore();
const router = useRouter();
const errorMessage = ref('');

const login = () => {
  if (!username.value || !password.value) {
    errorMessage.value = '未输入账号或密码，请输入！';
    return;
  }
  // 这里简单模拟登录成功，实际应用中需要与后端交互验证
  const newUser = { name: username.value, email: username.value };
  userStore.setUser(newUser);
  router.push('/todolist');
};
</script>

<style scoped>
.login {
  padding: 20px;
  text-align: center;
}

input {
  margin: 10px;
  padding: 10px;
  width: 200px;
}

button {
  padding: 10px 20px;
  background-color: #28a745;
  color: white;
  border: none;
  cursor: pointer;
}

button:hover {
  background-color: #218838;
}

.error-message {
  color: red;
  margin: 5px 0;
}
</style>